<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>
    <link  href="../../hos_manage/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css">
    <link rel="stylesheet" href="../css/sweetalert.css" >
    <link rel="stylesheet" href="../css/pageCode.css" />

    <link rel="stylesheet" href="/css/project/project.css">
    <link rel="stylesheet" type="text/css" href="/css/project/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/main.css"/>
    <link rel="stylesheet" href="/css/basic/basic.css">
    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/basic/ie_basic.css">
    <![endif]-->
    <link rel="stylesheet" href="/css/project/user.css">
    <link rel="stylesheet" href="../css/public.css">

    <script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone">
    <%@ include file="../left_menu.jsp"%>
        <!--右边内容-->
        <div class="right_cont">
        <!--右边导航下面内容-->
            <div class="message_hos_news_container" id="show_project_main">
                <div id="topbar-right" class="flex">
                    <div id="userList">
                        <div class="memberList_header">
                            <div>天下布医项目列表</div>
                            <div class="">
                                医院: <select v-model="hospital" @change="changeTerm()" style="max-width:150px">
                                    <option :value="i" v-for="i in hospitalList" v-html="i.name"></option>
                                </select>
                                <span class="project-order" v-html="orderName" @click="changeOrder()" onselectstart="return false"></span>
                                主要负责人: <input class="input-normal" type="" v-model="principal" @input="dalay('changeTerm')">
                                销售负责人: <input class="input-normal" type="" v-model="saler" @input="dalay('changeTerm')">
                                状态: <select v-model="state" @change="changeTerm()">
                                    <option>请选择</option>
                                    <option>已立项</option>
                                    <option>已结项</option>
                                    <option>延期</option>
                                </select>
                            </div>
                        </div>
                        <div class="js_title title js_title_group">
                            <span class="js_title_party box ">
                                <p class="name flex" style="width:40%">项目名称</p>
                                <p class="end-time flex" style="width:10%">结束时间</p>
                                <p class="principal flex" style="width:10%">项目负责人</p>
                                <p class="principal flex" style="width:10%">操作</p>
                                <p class="state flex" style="width:10%">状态</p>
                            </span>
                        </div>
                        <div class="js_title title user-title" v-for="data in datas">
                            <span class="js_title_party box " @click="detail(data)">
                                <p class="name flex" style="width:40%">
                                    <span v-html="data.hospital_name"></span>
                                    <span class="skin-color" v-html="data.item_name"></span>
                                </p>
                                <p class="end-time flex" style="width:10%" v-html="data.end_time"></p>
                                <p class="principal flex" style="width:10%" v-html="data.principal"></p>
                                <p class="principal flex" style="width:10%">
                                    <%
                                        if (checkAuth("删除项目", input)) {
                                    %>
                                    <span class="href" @click="delete(data)">删除</span>
                                    <%
                                        }
                                    %>
                                    <%
                                        if (checkAuth("编辑项目", input)) {
                                    %>
                                    <span class="href" @click="edit(data)">编辑</span>
                                    <%
                                        }
                                    %>
                                </p>
                                <p class="state flex" style="width:10%" v-html="data.state"></p>
                            </span>
                        </div>
                    </div>
                    <pagination :pagecount="page_count" :currentpage="current_page"></pagination>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <%@ include file="/components/pagination.jsp"%>
    <script type="text/javascript">
        new Vue({
            el: "#show_project_main",
            data: function() {
    			return {
    				datas: [],
                    hospital: {},
                    hospitalList: [],
                    state: "请选择",
                    saler: "",
                    principal: "",
                    timeout: "",
                    page_count: 0,
                    current_page: 1,
                    orderTag: "asc" ,
    			}
    		},
            computed: {
                orderName: function() {
                    if (this.orderTag == "asc") {
                        return "时间升序";
                    }
                    return "时间降序";
                },
            },
            methods: {
                changeOrder: function() {
                    if (this.orderTag == "asc") {
                        this.orderTag = "desc";
                    } else {
                        this.orderTag = "asc";
                    }
                    this.getProject();
                },
                delete: function(data) {
                    var self = this;
                    event.stopPropagation();
                    swal({
                        title: "您确定要删除该这个项目吗？",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        confirmButtonText: "是的，我要删除",
                        cancelButtonText: "取消",
                        confirmButtonColor: "#ec6c62"
                    }, function() {
                        $.ajax({
                            data: {
                                id: data.id,
                                act: "delete_project",
                            },
                            url: "projects.jsp",
                            success: function(res) {
                                res = JSON.parse(res);
                                if (res.errcode == 0) {
                                    var index = self.datas.indexOf(data);
                                    if (index != -1) {
                                        self.datas.splice(index, 1);
                                        swal("删除成功");
                                    } else {
                                        swal("删除失败");
                                    }
                                } else {
                                    swal(res.errmsg);
                                }
                            },
                        });
                    });
                },
                edit: function(data) {
                    saveParmsHerf("projects", {
                        current_page: this.current_page,
                        hospital: this.hospital,
                        state: this.state,
                        saler: this.saler,
                        principal: this.principal,
                        hospitalList: this.hospitalList,
                        orderTag: this.orderTag,
                    });
                    locationHerf("edit", {
                        data: data,
                    });
                    event.stopPropagation();
                },
                dalay: function(func) {
                    var self = this;
                    if (this.timeout) {
                        clearTimeout(this.timeout);
                    }
                    this.timeout = setTimeout(function() {
                        self[func]();
                    }, 700);
                },
    			detail: function(data) {
                    saveParmsHerf("projects", {
                        current_page: this.current_page,
                        hospital: this.hospital,
                        state: this.state,
                        saler: this.saler,
                        principal: this.principal,
                        hospitalList: this.hospitalList,
                        orderTag: this.orderTag,
                    });
                    locationHerf("detail", {
                        data: data,
                    });
    			},
                changeTerm: function() {
                    this.clearPage();
                    this.getProject();
                },
                clearPage: function() {
                    this.current_page = 1;
                    this.page_count = 1;
                },
                getProject: function() {
                    var self = this;
                    $.ajax({
        				data: {
        					page: this.current_page + "",
                            hospital_id: this.hospital.hospital_id + "",
                            state: this.state == "请选择" ? "" : this.state,
                            principal: this.principal,
                            sale_leader: this.saler,
                            order: this.orderTag,
        					act: "projects",
        				},
        				url: "projects.jsp",
        				success: function(res) {
        					res = JSON.parse(res);
        					if (res.errcode == 0) {
        						self.datas = res.data.rank;
                                self.page_count = res.data.page_count;
                                self.current_page = res.data.current_page;
        					}
        				}
        			});
                }
    		},
    		ready: function() {
                var self = this;
                var parms = getHrefParms("projects");
                if (parms) {
                    clearHrefParms("projects");
                    this.current_page = parms.current_page;
                    this.hospital = parms.hospital;
                    this.state = parms.state;
                    this.saler = parms.saler;
                    this.principal = parms.principal;
                    this.hospitalList = parms.hospitalList;
                    this.orderTag = parms.orderTag,
                    self.getProject();
                } else {
                    $.ajax({
                        data: {
                            act: "hospitals",
                        },
                        url: "projects.jsp",
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                self.hospitalList = [{
                                    name: "请选择",
                                    hospital_id: "",
                                }].concat(res.data);
                                self.hospital = self.hospitalList.filter(function(item) {
                                    return item.hospital_id == "";
                                })[0];
                                self.getProject();
                            }
                        }
                    });
                }
    		},
            // 需要重写的方法
            events: {
                changePage: function(i) {
                    this.current_page = i.currentpage;
                    this.getProject();
                },
            },
            components: {
                pagination: pagination,
            }
        });
    </script>
</body>
</html>
